<template>
  <div id="AceEditor" :style="{width: width, height: height}"></div>
</template>

<script>
import * as ace from 'brace'
import 'brace/mode/dot'
import 'brace/theme/monokai'
import 'brace/theme/textmate'

export default {
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100vh'
    }
  },
  data () {
    return {
      editor: null,
      content: ''
    }
  },
  mounted () {
    this.editor = ace.edit('AceEditor')
    // 设置语法为dot
    this.editor.getSession().setMode('ace/mode/dot')
    // 默认亮色主题
    this.editor.setTheme('ace/theme/textmate')
    // 设置内容
    this.editor.setValue(this.value, 1)
    // 内容变化监听
    this.editor.on('change', this.change)
    this.editor.setFontSize(14)
  },
  methods: {
    toggleTheme () {
      // 亮色皮肤和暗色皮肤切换
      const curTheme = this.editor.getTheme()
      if (curTheme.indexOf('textmate') > -1) {
        this.editor.setTheme('ace/theme/monokai')
      } else {
        this.editor.setTheme('ace/theme/textmate')
      }
    },
    change () {
      this.$emit('change', this.editor.getValue())
    }
  }
}
</script>

<style scoped>
</style>
